<template>
	<u-grid-item>
		<!-- <u-icon name="photo" :size="46"></u-icon> -->
		<image :src="baseUrl + '/imgs/mod-default.png'" mode="aspectFill"></image>
		<view class="grid-text">{{item.name}}</view>

		<!-- <u-switch :size="45" v-model="checked"></u-switch> -->
		<u-checkbox shape="circle" :size="60" :icon-size="50" v-model="checked"></u-checkbox>

	</u-grid-item>
</template>

<script>
	import {
		mapState
	} from "vuex"

	export default {
		name: "mod-item",
		props: ["item"],
		data() {
			return {
				checked: true
			};
		},

		computed: mapState([
			"baseUrl"
		]),
	}
</script>

<style lang="scss">
	$img-size: 300rpx;

	u-grid-item {
		position: relative;

		image {
			width: $img-size;
			height: $img-size;
			border-radius: 20rpx;
		}

		.grid-text {
			font-size: 1rem;
			margin-top: 20rpx;
			// color: $u-type-info;
			color: $text-gray-6;
		}

		u-checkbox {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-30%, -100%);
			opacity: .8;
		}
	}
</style>